<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="write">
        <div class="toubu">
            <router-link to="/my">
                <img src="../../../assets/image/toux.png" alt="">
            </router-link>
            <router-link to="/message">
                <img src="../../../assets/image/ld.png" alt="">
            </router-link>
        </div>
        <div class="writeMain">
            <div class="content">
                <input type="text" placeholder="*请输入标题(最多20个字)">
                <input type="text" placeholder="*请选择就诊科室 &gt;" >
                <input type="text" placeholder="*请选择主要病症 &gt;" >
                <textarea rows="4" cols="50" placeholder="这是提示文字" class="xq"></textarea>
                <b style="margin-bottom: 10px; display: inline-block;">请输入最近的一段治疗效果</b>
                <!-- //最近的一段治疗下过 -->
                <div class="zuijin">
                    <input type="text" placeholder="请输入最近一段治疗经历" >
                    <input type="text" placeholder="请选择开始时间" >
                    <input type="text" placeholder="请选择结束时间" >
                    <textarea rows="4" cols="50" placeholder="这是提示文字" ></textarea>
                </div>
                <div class="zuijin1">
                    最多可添加6张图片;a长按为图片排序
                </div>
                <div class="update">
                   <van-uploader v-model="fileList" :deletable="false" />
                </div>
                <!-- //开关 -->
                <div class="swchi">
                    <van-switch v-model="checked">
                        <template  #right-icon>
                            <div class="icon-wrapper" >
                            <van-icon :name="checked ? 'success' : 'cross'" />
                            </div>
                        </template>
                    </van-switch>
                </div>
                <div style="box-sizing: border-box;padding-left: 15px;margin-top: 5px;margin-bottom: 5px;">
                    提升额度可获得更多的关注，得到更多的建议
                </div>
                <div class="push">
                    <button @click="pushScopeId()">发布</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { showConfirmDialog } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter();
const fileList:any = ref([
    {
    url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
    deletable: true,
    beforeDelete: () => {
        showToast('删除前置处理');
    },
    },
    {
    url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',
    imageFit: 'contain',
    },
]);
const checked = ref(true);
    const onUpdateValue = (newValue) => {
      showConfirmDialog({
        title: '提醒',
        message: '是否切换开关？',
      }).then(() => {
        checked.value = newValue;
      });
    };
    //发布
    const pushScopeId = () => {
        showToast({
            message: '发布成功',
            position: 'bottom'
          });
          router.push('/friend');
    }
</script>
<style scoped lang="scss">
.write {
    width: 100vw;
    height: 100vh;
    background-color: #f1f1f1;

    .toubu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        width: 100%;
        height: 50px;

        img {
            width: 40px;
            height: 40px;
            border-radius: 10px;
        }
    }
    .writeMain{
        margin-top: 10px;
        width: 100%;
        height: auto;
        background-color: #fff;
        .content{
            width: 100%;
            height: 300px;
            input{
                font-size: 17px;
               width: 100%;
                border: none;
                height: 45px;
                border-bottom: 2px solid #f0f0f0;
                line-height: 45px;
            }
            .xq{
                color: #000;
                width: 100%;
                height: 200px;
                background-color: #fff;
                border: 2px solid #ddd;
                border-radius: 5px;
                resize: vertical;
                span{
                    color: rgb(120, 120, 202);
                }
            }
            .zuijin{
                width: 100%;
                height: 230px;
                background: #fff;
                border-radius: 10px;
                border: 1px solid #fff;
                animation: marquee-border 5s linear infinite;
            }
             @keyframes marquee-border {
                0% {
                    border-color: blue;
                }
                25% {
                    border-color: green;
                }
                50% {
                    border-color: red;
                }
                75% {
                    border-color: yellow;
                }
                100% {
                    border-color: blue;
                }
            }
            .zuijin1{
                margin-top: 10px;
                box-sizing: border-box;
                width: 100%;
                height: 30px;
                line-height: 30px;
                padding-left: 15px;
                color: #999;
                background-color: #ccc;
            }
            .swchi{
                width: 100%;
                height: 30px;
                background-color: #ddd;
            }
            .push{
                width: 100%;
                height: auto;
                margin-top: 10px;

                button{
                    width: 80%;
                    height: 40px;
                    color: #fff;
                    border-radius: 10px;
                    margin-left: 10%;
                    background-color: rgb(53, 128, 203);
                }
            }
        }
    }
}
</style>